<template>
    <div class="content">
      <div class="content-head">
        <el-form :inline="true" :model="formData" size="small" label-position="left">
          <el-form-item label="生产订单号">
            <el-input v-model="formData.workOrderNum" placeholder="请输入工单号"></el-input>
          </el-form-item>
          <el-form-item label="产品">
            <el-input v-model="formData.productName" placeholder="请输入产品名称"></el-input>
          </el-form-item>
          <el-form-item label="分摊时间">
            <el-date-picker v-model="formData.allocationDate" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-form>
        <div class="head-btns">
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addEvent">新增</el-button>
            <el-button type="warning" size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
            <el-button type="success" size="mini" icon="el-icon-refresh" @click="resetEvent">重置</el-button>
        </div>
      </div>
      <div class="content-table">
        <div class="table-main">
          <el-table :data="tableData" v-loading="tableLoading" style="width: 100%;" border highlight-current-row :max-height="tableMaxHeight" class="content-table-item">
            <el-table-column prop="productOrderCode" label="生产订单号" align="center" width=""></el-table-column>
            <el-table-column prop="allocationCode" label="分摊单号" align="center" width=""></el-table-column>
            <el-table-column prop="allocationDate" label="日期" align="center" width=""></el-table-column>
            <el-table-column prop="materialCode" label="产品编号" align="center" width=""></el-table-column>
            <el-table-column prop="materialName" label="产品名称" align="center" width=""></el-table-column>
            <el-table-column prop="quantity" label="数量" align="center" width=""></el-table-column>
            <el-table-column prop="companyUnit" label="单位" align="center" width=""></el-table-column>
            <el-table-column prop="productionWorkHours" label="生产工时" align="center" width=""></el-table-column>
            <el-table-column prop="allocatedWorkHours" label="辅助工时" align="center" width=""></el-table-column>
            <el-table-column prop="totalAssistanceHours" label="总辅助工时" align="center" width=""></el-table-column>
            <el-table-column prop="totalWorkHours" label="总工时" align="center" width=""></el-table-column>
            <el-table-column prop="" label="操作" align="center" fixed="right" width="150">
                <template slot-scope="{row,$index}">
                  <el-button type="text" size="mini" @click="examineEvent(row,$index)" style="margin-right: 10px;">详情</el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="deleteEvent(row,$index)">
                        <el-button type="text" size="mini" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="content-footer">
        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,40,80,100,200]" :page-size="pageSize" background layout="prev, pager, next,total, sizes, jumper" :total="total"></el-pagination>
      </div>
      <!-- 详情的dialog -->
      <el-dialog title="详情" :visible.sync="dialogVisible" width="50%" :destroy-on-close="true" @close="dialogInfo = {}">
        <el-descriptions v-loading="dialogLoading">
            <el-descriptions-item label="生产订单号">{{ dialogInfo.productOrderCode }}</el-descriptions-item>
            <el-descriptions-item label="分摊单号">{{ dialogInfo.allocationCode }}</el-descriptions-item>
            <el-descriptions-item label="分摊日期">{{ dialogInfo.allocationDate }}</el-descriptions-item>
            <el-descriptions-item label="类型">{{ dialogInfo.allocationType == 0 ? '失败修理' : dialogInfo.allocationType == 1 ? '打扫' : dialogInfo.allocationType == 2 ? '更换配件' : '其它' }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ dialogInfo.comment }}</el-descriptions-item>
            <el-descriptions-item label="产品编号">{{ dialogInfo.materialCode }}</el-descriptions-item>
            <el-descriptions-item label="产品名称">{{ dialogInfo.materialName }}</el-descriptions-item>
            <el-descriptions-item label="数量">{{ dialogInfo.quantity }}</el-descriptions-item>
            <el-descriptions-item label="单位">{{ dialogInfo.companyUnit }}</el-descriptions-item>
            <el-descriptions-item label="生产工时">{{ dialogInfo.productionWorkHours }}</el-descriptions-item>
            <el-descriptions-item label="辅助工时">{{ dialogInfo.allocatedWorkHours }}</el-descriptions-item>
            <el-descriptions-item label="总辅助工时">{{ dialogInfo.totalAssistanceHours }}</el-descriptions-item>
            <el-descriptions-item label="总工时">{{ dialogInfo.totalWorkHours }}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{ dialogInfo.createdBy }}</el-descriptions-item>
            <el-descriptions-item label="生产人员">{{ dialogInfo.operatorName }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ dialogInfo.createdDate }}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { portrait, autoOrientation, fullscreen } from "@/utils/rotatingScreen.js";
  import TableHeadFilter from "@/components/tableHeadFilter/index.vue";
  import M from "moment";
  import { reqUserInfo,reqAllocationList, reqDelAllocationById, reqAllocationById } from "@/api/workHourAllocation.js";
  import { getUserInfoByToken } from "@/utils/toosls.js";
  export default {
    name:"WorkHourAllocation",  //工时分摊
    components:{ TableHeadFilter },
    data() {
      return {
        formData:{
            workOrderNum:"",
            productName:"",
            allocationDate:new Array(2).fill(M().format("YYYY-MM-DD"))
        },
        tableData:[],
        currentPage:1,
        pageSize:20,
        total:0,
        tableLoading:false,
        tableMaxHeight:450,
        dialogVisible:false,
        dialogLoading:false,
        dialogInfo:{}
      }
    },
    mounted(){
        this.getWorkHourAllocationList();
        document.title = "工时分摊";
        this.calculateTableMaxHeight();
        window.addEventListener("resize",this.calculateTableMaxHeight);
        //精致环境下进行自动旋转
        const isDevelopment = process.env.NODE_ENV === 'development';
        if(!isDevelopment){
            autoOrientation();
        }
    },
    beforeDestroy(){
      window.removeEventListener("resize",this.calculateTableMaxHeight);
    },
    methods:{
        getWorkHourAllocationList(){
            const { workOrderNum,productName,allocationDate } = this.formData;
            const parameter = { 
                page:this.currentPage,
                size:this.pageSize,
                productOrderCode:workOrderNum,
                materialName:productName,
                startDate:allocationDate? allocationDate[0] : "",
                endDate:allocationDate? allocationDate[1] : ""
            }
            this.tableLoading = true;
            reqAllocationList(parameter).then(response => {
                if(response.data.code === 200){
                    const list = response.data.data.content;
                    this.tableData = list;
                    this.total = response.data.data.totalElements;
                }
                console.log("分页查询工时列表信息",response);
                this.tableLoading = false;
            }, error => {
                console.log("分页查询工时列表信息",error);
                this.tableLoading = false;
            })
        },
        searchEvent(){
            const { workOrderNum,productName,allocationDate } = this.formData;
            if(!(workOrderNum || productName || allocationDate)){
                this.$notify({title:"提示", message:"请输入查询条件",type:"error",duration:2000});
                return;
            }
            this.getWorkHourAllocationList();
        },
        resetEvent(){
            this.formData.workOrderNum = "";
            this.formData.productName = "";
            this.formData.allocationDate = new Array(2).fill(M().format("YYYY-MM-DD"));
            this.getWorkHourAllocationList();
        },
        handleCurrentChange(curPage){
            this.currentPage = curPage;
            //
        },
        handleSizeChange(pageSize){
            this.pageSize = pageSize;
            //
        },
        calculateTableMaxHeight(){
            const dom = document.querySelector(".table-main");
            this.$nextTick(() => {
            this.tableMaxHeight = dom.offsetHeight - 10;
            })
        },
        //格式化时间
        formatDate(val,type){
            let date = new Date(val);
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let h = date.getHours();
            let m = date.getMinutes();
            let s = date.getSeconds();
            if(type === 0){
                return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " " + this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
            } else if (type === 1){
                return year + "-" + this.addZero(month) + "-" + this.addZero(day);
            } else if (type === 2){
                return this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
            } else if (type === 3){
                return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " 00:00:00";
            } else if (type === 4){
            return year + "年" + this.addZero(month) + "月" + this.addZero(day) + "日";
            } else if (type === 5){
            return year + "-" + this.addZero(month) + "-" + "01";
            } else if (type === 6){
            return year + "年" + this.addZero(month) + "月";
            }
        },
        addZero(val){
            return val > 9 ? val : "0" + val;
        },
        //tableHeadFiler的change事件
        filterChangeEvent(parameter){
            const { state, filterField, selectedValue } = parameter;
            if(state === 'clear'){
            //清空操作
            if(this.formData[filterField] !== ""){
                this.formData[filterField] = "";
                this.search_btn();
            }
            }
            if(state === 'confirm'){
            //确定操作
            this.formData[filterField] = selectedValue;
            if(selectedValue !== ""){
                this.search_btn();
            }
            }
        },
        addEvent(){
            this.$router.push({name:"WorkHourAllocationAdd"});
        },
        examineEvent(row,index){
          const id = row.id;
          this.dialogVisible = true;
          this.dialogLoading = true;
          reqAllocationById(id).then(response => {
            if(response.data.code === 200){
              this.dialogInfo = response.data.data;
            }
            this.dialogLoading = false;
            console.log('根据id获取某分摊工时信息api',response);
          }, error => {
            this.dialogLoading = false;
            console.log('根据id获取某分摊工时信息api',error);
          })
        },
        deleteEvent(row,index){
          const id = row.id;
          reqDelAllocationById(id).then(response => {
            if(response.data.code === 200){
              this.$notify({title:"提示", message:"删除成功",type:"success",duration:2000});
              this.getWorkHourAllocationList();
            }
            console.log("删除某分摊工时详情api",response);
          }, error => {
            console.log("删除某分摊工时详情api",error);
          })
        }
    }
  }
  </script>
  
<style lang='scss' scoped>
.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1%;
  box-sizing: border-box;

  .content-head{
    flex: 0.5;
    .form-item{
      margin-right: 2vw;
    }
  }
  .content-table{
    flex: 8;
    margin: 10px 0;
    .table-date{
      width: 100%;
      height: 2%;
      min-height: 15px;
      margin-bottom: 0.5%;
      display: flex;
      justify-content: right;
    }
    .table-main{
      width: 100%;
      height: 98%;
    }
  }
  .content-footer{
    flex: 0.5;
    display: flex;
    justify-content: flex-end;
  }
}
/*
::v-deep .el-table__header th {
  padding: 0;
}
::v-deep .el-table__row {
  margin-bottom: 15px;
}
::v-deep .el-table .el-table__cell{
  padding: 0;
}
*/
</style>